<template>
	<view>
		<uni-transition mode-class="fade" :duration="500" :show="isShow">
			<view :class="['back-to-top','btn', {'safeArear': safeArear}]" @click="scrollToTop">
				<image src="@/static/image/Mine/backToTop.png" style="width: 22px;" mode="widthFix"></image>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		name: "backToTop",
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			bottom: {
				type: String,
				default: '20px'
			},
			right: {
				type: String,
				default: '30px'
			},
			safeArear: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			scrollToTop() {
				this.$emit('scrollToTop', false)
			}
		}
	}
</script>

<style scoped>
	.back-to-top {
		position: fixed;
		bottom: 20px;
		right: 30px;
		/* #ifdef H5 */
		padding: 15px 6px;
		/* #endif */
		/* #ifdef APP-PLUS */
		padding: 30rpx 6rpx;
		right: 15px;
		/* #endif */
		animation: showTopButtom .6s ease-out;
		animation-duration: .6s;
		animation-timing-function: ease-out;
	}

	.safeArear {
		position: fixed;
		bottom: 70px;
		right: 15px;
		/* #ifdef H5 */
		padding: 15px 6px;
		/* #endif */
		/* #ifdef APP-PLUS */
		padding: 30rpx 6rpx;
		/* #endif */
		animation: showTopButtom2 .6s ease-out;
	}

	.btn {
		background: var(--bg-13);
		box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
		color: var(--color-28);
		border-radius: 30px;
		cursor: pointer;
	}

	@media screen and (max-width: 768px) {
		.back-to-top {
			right: 15px;
		}

	}

	@keyframes showTopButtom {
		0% {
			bottom: -30px;
		}

		50% {
			bottom: 30px;
		}

		75% {
			bottom: 10px;
		}

		100% {
			bottom: 20px;
		}
	}

	@keyframes showTopButtom2 {
		0% {
			bottom: 0px;
		}

		50% {
			bottom: 80px;
		}

		75% {
			bottom: 60px;
		}

		100% {
			bottom: 70px;
		}
	}
</style>